<template>
  <div class="login_container">
    <div class="login_box">
      <img class="logo" src="../assets/logo.png" alt />
      <div class="demo-input-suffix">
        <!-- ref 用来获取dom元素 相当于document  this.$refs.form-->
        <el-form ref="form" :model="form" :rules="rulesForm">
          <el-form-item prop="username">
            <el-input
              placeholder="请输入内容"
              class="username"
              prefix-icon="iconfont icon-user"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入内容"
              prefix-icon="iconfont icon-lock_fill"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button size="mini" type="primary" @click="submitForm('form')">登录</el-button>
            <el-button size="mini" @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
           
<script>
//引入login_api
import { login_api } from "@/api/login_api.js";
var flag = true;
export default {
  data() {
    return {
      form: {
        username: "admin",
        password: "123456"
      },
      rulesForm: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          // console.log(valid);
          /*  //发送ajax请求
          this.$ajax.post("login", this.form).then(res => {
            // console.log(res);
            if (res.data.meta.status == 200) {
              this.$message({
                showClose: true,
                message: "恭喜你，登录成功",
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: "登录失败",
                type: "error"
              });
            }
          }); */
          const res = await login_api(this.form);
          // console.log(res);
          if (res.data.meta.status == 200) {
            //给登录按钮添加节流
            if (flag) {
              flag = false;
              setTimeout(()=> {
                this.$message({
                  message: "恭喜你，登录成功",
                  type: "success"
                });
                // console.log(2222222);
                flag = true;
              }, 800);
            }
            //获取token，存储本地，路由导航守卫-前置拦截
            window.sessionStorage.setItem("token", res.data.data.token);
            window.sessionStorage.setItem('user',res.data.data.id)
            //跳转welcome组件
            setTimeout(() => {
              this.$router.push("/welcome");
            }, 1000);
          } else {
            this.$message({
              message: "登录失败",
              type: "error"
            });
          }
        } else {
          console.log("登录失败");
          return false;
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    }
  }
};
</script>
<style scoped lang='less'>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  position: relative;
  .login_box {
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 300px;
    border-radius: 3px;
    background-color: #fff;
    img.logo {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 10px solid #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #ccc;
      box-shadow: 0 0 10px #ddd;
    }
    .username {
      margin-top: 90px;
    }
    .btn {
      text-align: right;
    }
  }
}
</style>
